<template>
	<view class="wrap">
		<!-- @scrolltolower:滚动到底部触发  lower-threshold:距离底部多少距离触发@scrolltolower -->
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-y="true" @scrolltolower='scrollBottom'
			:lower-threshold='2'>
			<view class="top" id="top" :style="{width:tableWidths+'rpx'}">
				<view v-for="(h,n) in header" :key='n' :class="{'header_dyg':true,'flexs':h.flxe}"
					:style="{width:h.hWidth+'rpx'}">
					{{h.name}}
				</view>
			</view>
			<view class="bottom" :style="{maxHeight: tableHeight+'rpx',width:tableWidths+'rpx'}">
				<view class="tablebox" v-for="(t,s) in tableData" :key='s' @click="jumpDetailed(t)">
					<view v-for="(h,n) in header" :key="n"
						:class="{'table_dyg':true,'tdColClass':h.bgcolor,'tdRowClass':t.bgcolor,'flexs':h.flxe}"
						:style="{width:h.hWidth+'rpx'}">
						<!-- 不等于操作列就显示文字 -->
						<text v-if="h.key!=='edit'" :style="{color:getColor(t,h)}">{{t[h.key]}}</text>
						<!-- 操作列显示按钮，后期用插槽 -->
						<view class="uni-group" v-else style="background-color: #fff;">
							<button class="uni-button" size="mini" type="primary" style="margin-right: 5px;"
								@click="editTable(t)">编辑</button>
							<button class="uni-button" size="mini" type="warn" @click="deleteTable(t)">删除</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// 表头配置:flxe(固定列)，bgcolor(列底纹)
	// 表体配置:bgcolor(行底纹)
	export default {
		props: {
			data2: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			head: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			tableHeight: {
				required: true,
				type: [Number, String],
				default: function() {
					return 0;
				}
			}
		},
		data() {
			return {
				//表体
				tableData: [],
				//表头
				header: [],
				// 表格总长度
				tableWidths: 0
			}
		},
		watch: {
			// 监听列表
			'data2'(a, b) {
				this.tableData = a
			},
			// 监听表头
			'head'(a, b) {
				this.header = a
				//计算列宽
				this.tableWidth()
			},
		},
		created() {
			//#ifdef H5
			this.tableData = this.data2 //列表
			this.header = this.head //表头
			this.tableWidth()
			// #endif
		},
		methods: {
			// 返回行数据
			jumpDetailed(row) {
				this.$emit('rowData', row)
			},
			// 滚动到底部，调用父组件方法
			scrollBottom(e) {
				// 滚动到底部才触发，滚动到右边不触发
				if (e.detail.direction == "bottom") {
					this.$emit('scrollBottom')
				}
			},
			// 颜色对比
			getColor(row, col) {
				let color = 'black'
				// 传值给父组件，通过父组件的方法内计算判断当前单元格数据是否需要标红，然后通过回调函数，返回一个color值来渲染
				this.$emit('getTextColor', row, col, val => {
					color = val
				})
				return color
			},
			// 修改按钮
			editTable(val) {
				this.$emit('getEdit', val)
			},
			// 删除按钮
			deleteTable(val) {
				this.$emit('getDelete', val)
			},
			// 计算单元格宽度
			tableWidth() {
				let w = 0 //计算表格长度
				this.header.forEach((head, index) => {
					let hw = head.name.length //表头单元格宽度
					let dw = 0 //列表单元格宽度
					this.tableData.forEach(data => {
						// 如果是操作列，就直接给十个字符长度，也就是列宽自动150，不是操作列的统一看字符串长度决定宽度
						let a = (head.key == 'edit' ? '1234567891' : (data[head.key] ? data[head.key]
							.toString() : '1'))
						let tw = (head.key == 'edit' ? 10 : a.length)
						// 这里每次循环找出更大的数赋值，确保dw中是表体单元格这一列中最大宽度，根据最大宽度来判断单元格显示
						if (dw < tw) {
							dw = tw
						}
					})
					// 表体单元格内容宽度小于表头内容时，以表头的宽度为主。根据表头的字符长度来区分宽度
					if (dw <= hw) {
						if (hw <= 3) {
							head['hWidth'] = 100
						} else if (hw <= 5) {
							head['hWidth'] = 160
						} else {
							head['hWidth'] = 260
						}
					} else {
						// 表体内容宽度大于表头内容宽度时，以表体宽度为主。根据表头的字符长度来区分宽度
						if (dw <= 3) {
							head['hWidth'] = 100
						} else if (dw <= 5) {
							head['hWidth'] = 160
						} else {
							head['hWidth'] = 260
						}
					}
					w += head['hWidth'] //叠加表格总长度
				})
				this.tableWidths = w //给表格赋值总长度
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100%;
	}

	// 表头
	.top {
		display: flex;
		position: sticky; //表头向上滚动时固定住
		top: 0;
		//width: 750px; //左右滚动时不会把固定的表头滚动走
		z-index: 100; //滑动时表头不被覆盖

		.header_dyg {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			// border-top: 1px solid #ccc;
			// border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			padding: 0 10rpx;
			background-color: #fff;
			font-size: 14px;
			font-weight: bold;
			color: #2b2b2b;
			flex-shrink: 0;
		}

		// 列定位固定单元格
		// .flexs {
		// 	position: sticky;
		// 	left: 0;
		// 	background-color: #fff;
		// 	z-index: 10;
		// }
	}

	// 表格列表
	.bottom {
		//width: 750px;

		.tablebox {
			display: flex;
			font-size: 20rpx;

			// background: #000;
			.table_dyg {
				height: 60rpx;
				text-align: center;
				// width: 100rpx;
				line-height: 60rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
				padding: 0 10rpx;
				background-color: #fff;
				flex-shrink: 0;
			}

			// 列定位固定单元格
			// .flexs {
			// 	position: sticky;
			// 	left: 0;
			// 	background-color: #fff;
			// 	z-index: 10;
			// }
		}
	}

	// 列的颜色
	.tdColClass {
		background-color: #fff;
	}

	// 行的颜色
	.tdRowClass {
		background-color: #fff;
	}
</style>
